<template>
  <h2>添加客户信息</h2>
  <el-form :model="custForm" :rules="rules" ref="formRef" label-width="120px">
    <el-form-item label="客户名称" prop="custName">
      <el-input v-model="custForm.custName" style="width: 80%"/>
    </el-form-item>
    <el-form-item label="联系地址" prop="address">
      <el-input v-model="custForm.address" style="width: 80%"/>
    </el-form-item>
    <el-form-item label="联系电话" prop="phone">
      <el-input v-model="custForm.phone" style="width: 80%"/>
    </el-form-item>
    <el-form-item label="客户职业" prop="custType">
      <el-select v-model="custForm.custType" placeholder="请选择职业...." style="width: 80%">
        <el-option label="保密" value="保密" />
        <el-option label="金融" value="金融" />
        <el-option label="互联网" value="互联网" />
        <el-option label="IT" value="IT" />
        <el-option label="能源" value="能源" />
      </el-select>
    </el-form-item>
    <el-form-item label="客户等级" prop="grade">
      <el-input v-model="custForm.grade" style="width: 80%"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="subCustForm">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {reactive, ref} from "vue";
import { request } from '../utils/request';
import { ElMessage } from 'element-plus'
const formRef = ref(null);
const custForm=reactive({
  custName:'',
  address:'',
  phone:'',
  custType:'',
  grade:1,
  hisTotal:0
});
const rules = {
  custName: [
    { required: true, message: '请输入客户名称', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入联系地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  custType: [
    { required: true, message: '请选择客户职业', trigger: 'change' }
  ],
  grade: [
    { required: true, message: '请输入客户等级', trigger: 'blur' }
  ]
};
function subCustForm(){
  formRef.value.validate((valid) => {
    if (!valid) return;
    request({
      url: "http://localhost:8081/saveCust",
      method: 'post',
      data: custForm
    })
      .then((response)=>{
        if(response.data.code==200){
          ElMessage(response.data.msg);
          custForm.custName = '';
          custForm.address = '';
          custForm.phone = '';
          custForm.custType = '';
          custForm.grade = 1;
          custForm.hisTotal = 0;
        }else{
          ElMessage(response.data.msg);
        }
      })
      .catch((error)=>{
        console.log(error);
      });
  });
}
</script>

<style scoped>

</style>